<template>
  <div id='login'>
    <!-- 登录 -->
    <div class="login" v-if="!show">
      <p>登陆账号</p>
      <div class="logo"><img src="../assets/image/logo.png"></div>
      <div class="box">
          <div class="left"><img src="../assets/image/account.png"></div>
          <div class="right"><input type="text" v-model="account" placeholder="请输入账户"></div>
      </div>
      <div class="box">
          <div class="left"><img src="../assets/image/password.png"></div>
          <div class="right"><input type="password" v-model="password" placeholder="请输入账户密码"></div>
      </div>
      <div class="box">
          <div class="left"><img src="../assets/image/verify.png"></div>
          <div class="right verify">
              <input type="text" v-model="verify" placeholder="请输入验证码">
              <button  @click="createCode" :disabled='false' :class="{'send-sms' : isSend}">{{code}}</button>
            </div>
      </div>
      <com-button :click="loginto">登录</com-button>
      <router-link class="register" tag="div" :to="'register'">注册账号</router-link>
      <div class="register forget" @click="show=true">忘记密码？</div>
    </div>
      <!-- 忘记密码 -->
    <div class="forget login" v-if="show">
      <p>忘记密码</p>
      <div class="box">
          <div class="left"><img src="../assets/image/account.png"></div>
          <div class="right"><input type="text" v-model="forgetnum" placeholder="请输入你的账户"></div>
      </div>
      <div class="box">
          <div class="left"><img src="../assets/image/phone.png"></div>
          <div class="right"><input type="text" v-model="forgetphone" placeholder="请输入你的手机号"></div>
      </div>
      <com-button :click="forgetTo">确定</com-button>
      <!-- <div class="register" @click="show=false">返回</div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      show: false,
      account: "",
      password: "",
      verify: "",
      code: "", //随机生成的验证码
      disabled: true,
      isSend: "",
      forgetnum: "",
      forgetphone: ""
    };
  },

  computed: {},

  created() {
    this.createCode();
  },

  mounted() {},

  methods: {
    forgetTo() {
      if (!this.forgetnum) {
        this.$bus.$emit("toast", "账号不能为空");
      } else {
        this.axios
          .post("apiindex/forgetpwd", {
            user_num: this.forgetnum,
            phone: this.forgetphone,
          })
          .then(({ data }) => {
            if (data.code === "200") {
              this.show = false;
              this.$bus.$emit("toast", data.data);
            } else if (data.code === "204") {
              this.show = false;
              this.$bus.$emit("toast", data.data);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    loginto() {
      if (!this.account) {
        this.$bus.$emit("toast", "账号不能为空");
      } else if (!this.password) {
        this.$bus.$emit("toast", "请输入密码");
      } else {
        this.validate();
      }
    },
    loading() {
      this.axios
        .post("apireg/login", {
          user_num: this.account,
          pwd: this.password
        })
        .then(({ data }) => {
          if (data.code === "200") {
            if (!localStorage.token) {
              localStorage.setItem("token", data.data);
            } else {
              localStorage.removeItem("token");
              localStorage.setItem("token", data.data);
            }
            this.$router.push("clause");
            this.$bus.$emit("toast", "登录成功");
          } else if (data.code === "204") {
            this.createCode();
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    /* 检验输入的验证码的正确性 */
    validate() {
      var inputCode = this.verify.toUpperCase(); //输入的验证码
      var codeToUp = this.code.toUpperCase(); //随机生成的验证码
      console.log(inputCode);
      console.log(codeToUp);
      if (inputCode.length <= 0) {
        this.$bus.$emit("toast", "请输入验证码");
        return false;
      } else if (inputCode != codeToUp) {
        this.$bus.$emit("toast", "验证码输入错误");
        this.createCode();
        return false;
      } else {
        this.loading();
      }
    },
    createCode() {
      /* 生成验证码的函数 */
      var code = "";
      var codeLength = 4;
      var selectChar = new Array(
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      for (var i = 0; i < codeLength; i++) {
        var charIndex = Math.floor(Math.random() * 58);
        code += selectChar[charIndex];
      }
      if (code.length != codeLength) {
        this.createCode();
      }
      this.code = code;
      console.log(code);
    }
  }
};
</script>
<style lang='scss' scoped>
#login {
  width: 750px;
  text-align: center;
  background-color: #fff;
  padding: 76px 60px 0px;
  .login {
    p:nth-of-type(1) {
      font-size: 36px;
      text-align: left;
      font-family: PingFangSC-Semibold;
      font-weight: 600;
      color: rgba(10, 137, 172, 1);
      line-height: 50px;
    }
    .logo {
      margin: 0 auto;
      width: 300px;
      height: 300px;
      img {
        height: 100%;
      }
    }
    .box {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 36px;
        height: 40px;
        img {
          width: 100%;
        }
      }
      .right {
        border-bottom: 1Px solid #0a89ac;
        input {
          width: 570px;
          height: 110px;
          background: rgba(255, 255, 255, 0.1);
        }
        input::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #aaa;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #aaa;
        }

        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #aaa;
        }

        input:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #aaa;
        }
      }
      .verify {
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 398px;
        }
        button {
          width: 152px;
          height: 62px;
          text-align: center;
          margin-right: 20px;
          font-size: 34px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 48px;
          background: rgba(210, 221, 224, 1);
          border-radius: 6px;
        }
      }
    }
    .register {
      display: inline-block;
      width: 48%;
      margin-top: 80px;
      font-size: 34px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(10, 137, 172, 1);
      line-height: 42px;
      text-align: center;
    }
  }
}
</style>